<template>

	<div style="height: 100%;">
		<div class="displayFlexBet" style="margin-bottom: 10px;">
			<div class="displayFlex">
				<el-input placeholder="产品名称" v-model="getParams.productName" style="width: 150px;" clearable></el-input>

				<el-select v-model="getParams.productType" placeholder="产品类型" style="margin-left: 10px;width: 120px;" clearable>
					<el-option label="中间产品" value="SEMI_PRODUCT" />
					<el-option label="最终产品" value="FINAL_PRODUCT" />
				</el-select>

				<el-select v-model="getParams.busiStatus" filterable placeholder="请选择" style="margin-left: 10px;width: 120px;">
					<el-option label="启用" value="IN_USE" />
					<el-option label="停用" value="NOT_USE" />
				</el-select>

				<el-button type="primary" style="margin-left: 10px;" icon="el-icon-search"
					@click="getEntAuxiliaryMaterialList">筛选</el-button>
			</div>

			<div class="displayFlex">
				<el-button @click="visible1 = true,form=$options.data().form" icon="el-icon-plus" type="primary"
					size="mini">新增产品</el-button>
			</div>

		</div>


		<div style="background: #f5f5f5;height: 100%;">
			<el-table :data="tableData" style="background: #fff;" size="mini" border stripe :height="contentHeight*0.76+'px'">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="productName" label="产品名称">
				</el-table-column>
				<el-table-column prop="productTypeStr" label="产品类型">
				</el-table-column>
				<el-table-column prop="unitValue" label="计量单位">
				</el-table-column>
				<el-table-column prop="materialNameList" label="原辅材料">
					<template slot-scope="scope">
						<div>{{scope.row.materialNameList.join(",")}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="purposeList" label="生产项目">
					<template slot-scope="scope">
						<template slot-scope="scope">
							<div v-for="(item,index) in scope.row.purposeList">{{item}}</div>
						</template>
					</template>
				</el-table-column>
				<el-table-column prop="busiStatusStr" label="状态" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.busiStatus == 'IN_USE'" type="success"
							size="mini">{{scope.row.busiStatusStr}}</el-tag>
						<el-tag v-else type="danger" size="mini">{{scope.row.busiStatusStr}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
				</el-table-column>
				<el-table-column label="操作" width="100" align="center">
					<template slot-scope="scope">
						<template>
							<el-button v-if="scope.row.busiStatus== 'IN_USE'" type="text" @click="updateBusiStatus(scope.row)"
								style="color: #F56C6C;" size="small">
								停用
							</el-button>
							<el-button v-else type="text" size="small" @click="updateBusiStatus(scope.row)" style="color: #F56C6C;">
								启用
							</el-button>
						</template>

						<el-button type="text" size="small"
							@click="visible1 = true,form = scope.row,form.isEdit=true">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<el-dialog :visible.sync="visible1" :title="form.isEdit?form.productName+'的信息':'产品信息'" width="30%">
			<el-form ref="form3" :model="form" :rules="formRules" label-width="80px" label-position="left">

				<el-form-item label="产品名称" prop="productName">
					<el-input v-model="form.productName" style="width: 100%;"></el-input>
				</el-form-item>

				<el-form-item label="产品类型" prop="productType">
					<el-select v-model="form.productType" placeholder="请选择" style="width: 100%;">
						<el-option label="中间产品" value="SEMI_PRODUCT" />
						<el-option label="最终产品" value="FINAL_PRODUCT" />
					</el-select>
				</el-form-item>

				<el-form-item label="计量单位" prop="unitCode">
					<el-select v-model="form.unitCode" style="width: 100%;">
						<el-option :label="item.value" :value="item.code" v-for="(item,index) in unitList">
						</el-option>
					</el-select>
				</el-form-item>

				<div style="text-align: center;">
					<el-button type="primary" @click="saveOrUpdate()">保存</el-button>
				</div>
			</el-form>
		</el-dialog>
	</div>

</template>

<script>
	let that
	export default {
		data() {
			return {
				visible1: false,
				tableData: [],
				unitList: [],
				getParams: {
					busiStatus: "IN_USE"
				},
				contentHeight: window.innerHeight,
				form: {
					id: '', // 产品id
					productName: '', // 产品名称，必填
					unitCode: '', // 产品单位，必填
					productType: '',
					ingredientList: []
				},
				formRules: {
					productName: [{
						required: true,
						message: '请输入产品名称',
						trigger: 'blur',
					}],
					productType: [{
						required: true,
						message: '请选择类型',
						trigger: 'blur',
					}],
					unitCode: [{
						required: true,
						message: '请输入产品单位',
						trigger: 'blur'
					}]
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			console.log("dsdsds")

			that.ajax({
				url: '/codeType/listCodeValue',
				data: {
					typeCode: 'UNIT_TYPE'
				},
				success: function(data) {
					if (data.status == 1) {
						that.unitList = data.data;
					}
				}
			});

			that.getEntAuxiliaryMaterialList()
		},

		methods: {
			//添加有害元素
			addIngredientList() {
				that.form.ingredientList.push({
					ingredientName: '',
					percent: ''
				})
			},


			deleteIngredientList(index) {
				that.form.ingredientList.splice(index, 1)
			},

			updateBusiStatus(item) {
				this.$confirm('是否确定此操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/entProduct/updateBusiStatus',
						data: {
							productId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.getEntAuxiliaryMaterialList()
							}
						},
					})
				})
			},

			getEntAuxiliaryMaterialList() {
				that.ajax({
					url: '/entProduct/getEntProductList',
					data: JSON.stringify(that.getParams),
					contentType: 'application/json',
					success: function(result) {
						that.tableData = result.data
					},
				})
			},

			cancle() {
				that.form = that.$options.data().form
				that.visible1 = false
			},

			saveOrUpdate() {
				that.$refs['form3'].validate(function(valid) {
					if (valid) {
						that.$confirm('是否确定保存, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {

							that.ajax({
								url: '/entProduct/saveEntProduct',
								data: JSON.stringify(that.form),
								contentType: 'application/json',
								success: function(result) {
									that.$message.success("保存成功！")
									that.cancle()
									that.getEntAuxiliaryMaterialList()
								},
							})
						})
					}
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>